@charset "UTF-8";


/**----------------------------------2D变形Transform大类：控制元素的2D变形，以及元素变形所参照的原点等------------------------------------------**/


/**
目录分类：
	bc-tf[-类型][类别]：transform，设置元素的变形。
	bc-tf-to[-类型][类别]：transform-origin，设置元素变形所参照的原点。
*/




/**
设置元素的变形：
格式：
	bc-tf[-类型][类别]
说明：
	前缀为bc-tf，代表：transform，设置元素的变形。
	类别为数字编号，用于定义各种不同的元素变形。
类型：
	0|n：none，默认值，无变形。
	1|t：translate(tx,ty)，设置元素的2D平移量，即元素在横向上移动tx距离，在纵向上移动ty距离。其中，tx参数对应X轴（水平横向），ty参数对应Y轴（垂直纵向）。若省略ty参数，则ty默认值为0。
	2|tx：translateX(tx)，设置元素在横向上的2D平移量，即元素在横向上移动tx距离。
	3|ty：translateY(ty)，设置元素在纵向上的2D平移量，即元素在纵向上移动ty距离。
	4|r：rotate(angle)，设置元素顺时针转过angle角度。
	5|s：scale(sx,sy)，设置元素的2D缩放比，即元素在横向上缩放比为sx，纵向上缩放比为sy。若省略sy参数，则sy等于sx，即保持纵横比缩放。
	6|sx：scaleX(sx)，等同于scale(sx,1)。
	7|sy：scaleY(sy)，等同于scale(1,sy)。
	8|sk：skew(sx,sy)，设置元素沿着X轴倾斜sx角度，沿着Y轴倾斜sy角度。若省略sy参数，则sy默认为0。
	9|skx：skewX(sx)，设置元素沿着X轴倾斜sx角度。
	10|sky：skewY(sy)，设置元素沿着Y轴倾斜sy角度。
	11|m：matrix(m11,m12,m21,m22,dx,dy)，基于矩阵变换的函数，算法比较复杂，较少使用。
*/
.bc-tf0, .bc-tf-n{
	/*示例：不变形*/
	-moz-transform: none;
	-webkit-transform: none;
	-xv-transform: none;
	-o-transform: none;
	-khtml-transform: none;
	-ms-transform: none;
	transform: none;
}
.bc-tf1, .bc-tf-t1{
	/*示例：元素沿X，Y轴分别位移(20px，30px)*/
	-moz-transform: translate(20px, 30px);
	-webkit-transform: translate(20px, 30px);
	-xv-transform: translate(20px, 30px);
	-o-transform: translate(20px, 30px);
	-khtml-transform: translate(20px, 30px);
	-ms-transform: translate(20px, 30px);
	transform: translate(20px, 30px);
}
.bc-tf2, .bc-tf-tx1{
	/*示例：元素沿X轴位移20px*/
	-moz-transform: translateX(20px);
	-webkit-transform: translateX(20px);
	-xv-transform: translateX(20px);
	-o-transform: translateX(20px);
	-khtml-transform: translateX(20px);
	-ms-transform: translateX(20px);
	transform: translateX(20px);
}
.bc-tf3, .bc-tf-ty1{
	/*示例：元素沿Y轴位移20px*/
	-moz-transform: translateY(20px);
	-webkit-transform: translateY(20px);
	-xv-transform: translateY(20px);
	-o-transform: translateY(20px);
	-khtml-transform: translateY(20px);
	-ms-transform: translateY(20px);
	transform: translateY(20px);
}
.bc-tf4, .bc-tf-r1{
	/*示例：元素旋转30度*/
	-moz-transform: rotate(30deg);
	-webkit-transform: rotate(30deg);
	-xv-transform: rotate(30deg);
	-o-transform: rotate(30deg);
	-khtml-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	transform: rotate(30deg);
}
.bc-tf5, .bc-tf-s1{
	/*示例：元素放大到原样的2倍*/
	-moz-transform: scale(2, 2);
	-webkit-transform: scale(2, 2);
	-xv-transform: scale(2, 2);
	-o-transform: scale(2, 2);
	-khtml-transform: scale(2, 2);
	-ms-transform: scale(2, 2);
	transform: scale(2, 2);
}
.bc-tf6, .bc-tf-sx1{
	/*示例：元素横向放大到原样的2倍，纵向不变，即：宽度放大一倍，高度不变。*/
	-moz-transform: scaleX(2);
	-webkit-transform: scaleX(2);
	-xv-transform: scaleX(2);
	-o-transform: scaleX(2);
	-khtml-transform: scaleX(2);
	-ms-transform: scaleX(2);
	transform: scaleX(2);
}
.bc-tf7, .bc-tf-sy1{
	/*示例：元素纵向放大到原样的2倍，横向不变，即：高度放大一倍，宽度不变。*/
	-moz-transform: scaleY(2);
	-webkit-transform: scaleY(2);
	-xv-transform: scaleY(2);
	-o-transform: scaleY(2);
	-khtml-transform: scaleY(2);
	-ms-transform: scaleY(2);
	transform: scaleY(2);
}
.bc-tf8, .bc-tf-sk1{
	/*示例：元素横向倾斜30度，纵向倾斜30度。*/
	-moz-transform: skew(30deg, 30deg);
	-webkit-transform: skew(30deg, 30deg);
	-xv-transform: skew(30deg, 30deg);
	-o-transform: skew(30deg, 30deg);
	-khtml-transform: skew(30deg, 30deg);
	-ms-transform: skew(30deg, 30deg);
	transform: skew(30deg, 30deg);
}
.bc-tf9, .bc-tf-skx1{
	/*示例：元素横向倾斜30度。*/
	-moz-transform: skewX(30deg);
	-webkit-transform: skewX(30deg);
	-xv-transform: skewX(30deg);
	-o-transform: skewX(30deg);
	-khtml-transform: skewX(30deg);
	-ms-transform: skewX(30deg);
	transform: skewX(30deg);
}
.bc-tf10, .bc-tf-sky1{
	/*示例：元素纵向倾斜30度。*/
	-moz-transform: skewY(30deg);
	-webkit-transform: skewY(30deg);
	-xv-transform: skewY(30deg);
	-o-transform: skewY(30deg);
	-khtml-transform: skewY(30deg);
	-ms-transform: skewY(30deg);
	transform: skewY(30deg);
}




/**
设置元素变形所参照的原点：
格式：
	bc-tf-to[-类型][类别]
说明：
	前缀为bc-tf-to，代表：transform-origin，设置元素变形所参照的原点。
*/
.bc-tf-to0{
	/*示例：以元素中心作为变换原点。*/
	-moz-transform-origin: 50% 50%;
	-webkit-transform-origin: 50% 50%;
	-xv-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	-khtml-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}
.bc-tf-to1{
	/*示例：以元素的（20px,30px）像素点作为变换原点。*/
	-moz-transform-origin: 20px 30px;
	-webkit-transform-origin: 20px 30px;
	-xv-transform-origin: 20px 30px;
	-o-transform-origin: 20px 30px;
	-khtml-transform-origin: 20px 30px;
	-ms-transform-origin: 20px 30px;
	transform-origin: 20px 30px;
}

